<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Browse Movies</title>
<link rel="stylesheet" type="text/style"
	href="resources/mytheme/css/normalize.css">
<link rel="stylesheet" type="text/style"
	href="resources/mytheme/css/browser.css">
<link rel="stylesheet" type="text/style"
	href="resources/mytheme/css/stylesheet.css">
<script type="text/javascript">
	function dropDownChange(url) {
		var ratingDD = document.getElementById("ratingdropdown");
		var decadeDD = document.getElementById("decadedropdown");
		var rating = ratingDD.options[ratingDD.selectedIndex].value;
		var decade = decadeDD.options[decadeDD.selectedIndex].value;
		url = url.replace('rating=', 'rating=' + rating);
		url = url.replace('decade=', 'decade=' + decade + '25');
		window.location.href = url;
	}
	function search(url) {
		var searchstring = document.getElementById("searchBox").value;
		url = url + searchstring;
		window.location.href = url;
	}
</script>
</head>

<body>
	<div id="header">
		<div id="logo">
			<img src="resources/mytheme/img/Logo.png" alt="RentFlix">
		</div>
		<div id="searchNav">
			<form name="inputForm" method="get">
				<input class="searchBox" type="text" name="searchBox" id="searchBox"
					placeholder="Search Movies..."
					onkeypress="if (event.keyCode == 13) {search('${pageContext.request.contextPath}/searchalt?searchBox='); return false;}">
				<input class="searchButton" type="button" value="Search"
					onclick="search('${pageContext.request.contextPath}/searchalt?searchBox=')">
			</form>
		</div>
		<div id="navBar">
			<a href="/MovieProject/browse">Movies</a> <a
				href="/MovieProject/browse?genre=Family&rating=&decade=">Kids</a> <a
				href="/MovieProject/viewqueue">Queue</a>
		</div>

		<div id="loginBar">
			<ul>
				<li><div id="signoutform">
						<form action="signout" method="post" name="loutform">
							<input class="lastlink" type="submit" value="Sign Out"
								style="text-transform: capitalize;">
						</form>
					</div></li>
				<li><a class="firstlink" href="/MovieProject/MyAccount">My
						Account</a></li>
				<!-- <a href="/MovieProject/register">Register New Account</a> -->
				<!-- 		<a href="/MovieProject/reports">Admin: Reports</a>
			<a href="/MovieProject/CheckInRentals">Admin: Check-in</a>
			<a href="/MovieProject/newMovie">Admin: Add Movie</a> -->
			</ul>
		</div>
	</div>

	<div id="bodyContainer">
		<h2 class="bodyTitle">Select your Movie to add to Queue.</h2>
		<div id="browserOptions">

			<div id="MovieGenre">
				<a class="AllMovies"
					href="${pageContext.request.contextPath}/browse?genre=&rating=${param.rating }&decade=${param.decade }">All
					Movies</a>
				<c:forEach items="${genredropdown }" var="genre">
					<a class="GenreBtn"
						href="${pageContext.request.contextPath}/browse?genre=${genre.key }&rating=${param.rating }&decade=${param.decade }%25">${genre.value }</a>
				</c:forEach>
			</div>
			<div id="Rating">
				<form name="ratingdropdown" method="get">
					<select id="ratingdropdown" name="rating"
						onchange="dropDownChange('${pageContext.request.contextPath}/browse?genre=${param.genre }&rating=&decade=')">
						<c:forEach items="${ratingdropdown }" var="rating">
							<c:choose>
								<c:when test="${rating.key == param.rating }">
									<option value="${rating.key }" selected>${rating.value }</option>
								</c:when>
								<c:otherwise>
									<option value="${rating.key }">${rating.value }</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</select>
				</form>
			</div>
			<div id="Decade">
				<form name="decadedropdown" method="get">
					<select id="decadedropdown" name="decade"
						onchange="dropDownChange('${pageContext.request.contextPath}/browse?genre=${param.genre }&rating=&decade=')">
						<c:forEach items="${decadedropdown }" var="decade">
							<c:choose>
								<c:when test="${decade.key == param.decade }">
									<option value="${decade.key }" selected>${decade.value }</option>
								</c:when>
								<c:otherwise>
									<option value="${decade.key }">${decade.value }</option>
								</c:otherwise>
							</c:choose>
						</c:forEach>
					</select>
				</form>
			</div>
		</div>

		<div id="browsedMovies">
			<ul>
				<c:forEach items="${filterresults }" var="result">
					<li><a href="/MovieProject/movie?searchBox=${result.title }">
							<img src="${result.imageURL }" />
					</a></li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<div id="footer">
		<div id="foota">
			<center>
				<p>Get Help</p>
			</center>
			<ul>
				<li><a href="FAQ">FAQ</a></li>
				<li><a href="#">Help Center</a></li>
				<li><a href="#">Account</a></li>
				<li><a href="#">Questions</a></li>

			</ul>


		</div>
		<div id="footb">
			<p>Our Company</p>
			<ul>
				<li><a href="AboutUs">About us </a></li>
				<li><a href="#">Reviews </a></li>
				<li><a href="Jobs">Jobs </a></li>
				<li><a href="#">Terms of Use</a></li>

			</ul>

		</div>
		<div id="footc">
			<p>Getting Started</p>
			<ul>
				<li><a href="#">Free Trail Offer Details </a></li>
				<li><a href="#"> Redeem Your Gift</a></li>
			</ul>

		</div>
	</div>
</body>
</html>